
<template>
<el-container style="width: 100%;height: 680px ;">
<el-header style="width: 100%;height: 10%;background-color: #FBFBFB ">
<img src="../img/logo.png" style="width:180px;padding-left:50px">
</el-header>
<div style="width: 100%; height: 78%; position: relative;padding-top: 50px">
  <div style="
  background: url('https://x0.ifengimg.com/ucms/2024_14/264FEB495A406F0BF2FF899A9595D1B603A7E237_size48_w919_h612.jpg') 
  no-repeat center center; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.7;"></div>
  <div style="position: relative; z-index: 1;">
      <div class="common-layout">
        <el-container style="width: 50%;;height: 370px;margin: auto;padding-top:50px">
          <el-aside width="200px" style="height: 325px;"  >
          <img src="../img/login.png" contenteditable="false" style="width: 100%;height: 98%;" />
        </el-aside>
      <el-main style="background-color: #f2f2f2;height: 100%;" >
        <el-header style="padding-left:50px">
         <div class="loginuser">
          <li> <h1>账号密码登录</h1></li>
          <li> <a href="" style="text-decoration: none;padding-left: 150px;font-size: 12px;" >注册</a></li>
         
         
         </div>
          
        </el-header>
        
          <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
    <el-form-item class="label1"  prop="realName">
      <el-input style="font-size: 12px;" v-model="ruleForm.realName" placeholder="请输入用户名"   />
    </el-form-item>
    <el-form-item class="label1"    prop="password">
        <el-input style="font-size: 12px;" v-model="ruleForm.password" placeholder="请输入密码"  type="password" />
    </el-form-item>
    <el-form-item class="label1" style="font-size: 11px;"   prop="deptId">
      <el-select  v-model="ruleForm.deptId"    >
      <el-option   v-for="item in options" :label="item.deptname" :value="item.deptmentId"/>
       </el-select>
      </el-form-item>
     
<div style="margin-top: 50px;">
    <el-button style="width: 100px;" type="primary"  size="medium" :icon="Check"  @click="submitForm(ruleFormRef)" />
    <el-button  style="width: 100px;"  size="medium"   type="danger" :icon="Delete"   @click="resetForm(ruleFormRef)" />
  </div>
 
  </el-form>
</el-main>
 
  </el-container>
     </div>    

    </div>
    </div>
    <el-footer class="footer" style="width: 100%; height: 12%; background-color: #FBFBFB;padding-left: 27%">
    <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;">
      <li style="margin-right: 10px;">微医提供在线医疗服务技术支持 |</li>
      <li style="margin-right: 10px;">一个网1433223号 |</li>
      <li style="margin-right: 10px;">tag1111111 |</li>
      <li style="margin-right: 10px;">隐私有关政策 |</li>
      <li>宇宙无责声明</li>
    </ul>
  </el-footer>
</el-container>
</template>

<script lang="ts" setup name="login">
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import {Check, Delete} from '@element-plus/icons-vue'
import axiosInstance from '@/utils/axiosUtils'
import { userLoginStorage } from '@/stores/userloginStorage'
import router from '@/router'

interface RuleForm {
  realName: string
  password: string
  deptId: number

}
const options=reactive([{
deptmentId:null,
deptname:null
}]
);
const storage=userLoginStorage();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
realName: '',
password: '',
deptId: null

});
axiosInstance.get('/api/employee/getEmployeesDeptIdAndName')
.then(response=>{
  console.log(response.data);

  response.data.forEach(item => {
    options.push({
      deptmentId: item.deptmentId,
      deptname: item.deptName,
   
    });
  });
 

})
.catch(error=>{
  console.log(error);
});
const rules = reactive<FormRules<RuleForm>>({
  realName: [
    { required: true, message: '自己起个名字吧', trigger: 'blur' },
    { min: 1, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [
  { required: true, message: '好好输', trigger: 'blur' },
  { min: 1, max: 6, message: 'Length should be 1 to 6', trigger: 'blur' },
  ],
  deptId: [
    {
      required: true,
      message: '请选择您的科室上班',
      trigger: 'change',
    },
  ]
})
//创造每个用户的对象
const user=reactive({
  realName:null,
  deptId:0,
  token:null
})



//登录认证=====》发起请求进行登录，有token不创建，无token就创建token
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      axiosInstance.post('/api/login', {
        realName: ruleForm.realName,
        password: ruleForm.password,
        deptId: ruleForm.deptId
      }).then(res => {
        console.log("后端响应token"+res.data.token);
        
        user.token=res.data.token;
        user.deptId=res.data.deptId;
        user.realName=res.data.realName;
        if(res.data.token!=null){
          storage.token=user.token;
          storage.login(user);
          storage.checkToken();
          router.push('/outerContainer/indexHello')
        }
        console.log("storageToken:"+storage.token);
        
      })
      .catch(err => {
        console.log(err)
      })
  
    } else {
      console.log('error submit!', fields)
    }
  })
}


const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields();
  ruleForm.realName = ''
  ruleForm.password = ''
  ruleForm.deptId = null
}

</script>
<style  scoped>
 
.label{
  
   width:500px;
   height: 300px;
   margin: auto;
   background-color: #f2f2f2;
}.label1{
  width: 300px;
  height: 5px;
  margin: auto;
  padding-top: 30px;
}
 
 
.footer li {

  display: inline-block;
  text-decoration: none;
  font-size: 12px; /* 调整为可读的大小 */
  color: grey;
}
</style>